<script>
init({
  title: 'Modal Table',
  desc: 'Use Bootstrap Table in a modal. We need to call `resetView` method after modal shown.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <button
    id="button"
    type="button"
    class="button is-primary is-large lunch"
  >
    Launch modal table
  </button>

  <div class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          Modal table
        </p>
        <button
          class="delete close"
          aria-label="close"
        ></button>
      </header>
      <section class="modal-card-body">
        <table
          id="table"
          data-toggle="table"
          data-height="345"
          data-url="json/data1.json"
        >
          <thead>
            <tr>
              <th data-field="id">
                ID
              </th>
              <th data-field="name">
                Item Name
              </th>
              <th data-field="price">
                Item Price
              </th>
            </tr>
          </thead>
        </table>
      </section>
      <footer class="modal-card-foot">
        <button class="button close">
          Close
        </button>
      </footer>
    </div>
  </div>
</template>

<script>
  const $table = $('#table')

  function mounted () {
    $('#button').click(function () {
      $('.modal').addClass('is-active')
      $table.bootstrapTable('resetView')
    })
    $('.close').click(function () {
      $('.modal').removeClass('is-active')
    })
  }
</script>
